// 基本信息
import DialogBox from "@/components/DialogBox";
import { ElForm } from "element-plus";
import { defineComponent, PropType } from "vue";
interface ServerForm {
	[key: string]: any;
}
export default defineComponent({
	props: {
		detail: {
			type: Object as PropType<ServerForm>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const formRule = reactive({
			name: [{ required: true, message: "请输入服务名称", trigger: "change" }],
			host: [{ required: true, message: "请输入服务地址", trigger: "change" }],
			port: [{ required: true, message: "请输入服务端口", trigger: "change" }]
		});

		const validData = () => {
			formRef.value?.validate(valid => {
				if (valid) {
					emit("submit");
				}
			});
		};
		const changeType = () => {
			props.detail.username = "";
			props.detail.password = "";
			props.detail.dbName = "";
			props.detail.dbDriver = "";
			props.detail.dbTable = "";
			props.detail.url = "";
		};
		onMounted(() => {});
		return () => {
			return (
				<DialogBox
					{...attrs}
					onConfirm={() => {
						validData();
					}}
				>
					<div class="flex">
						<el-form class="flex-1" model={props.detail} ref={formRef} rules={formRule} label-width="100px">
							<el-form-item label="服务类型" prop="type" style="display:none">
								<el-radio-group v-model={props.detail.type} disabled={props.detail.id ? true : false} onChange={changeType}>
									<el-radio label="MQTT">MQTT</el-radio>
									<el-radio label="HTTP">HTTP</el-radio>
									<el-radio label="DB">DB</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="服务名称" prop="name">
								<el-input v-model={props.detail.name} placeholder="请输入服务名称" />
							</el-form-item>
							<el-form-item label="服务地址" prop="host">
								<el-input v-model={props.detail.host} placeholder="请输入服务地址" />
							</el-form-item>
							<el-form-item label="服务端口" prop="port">
								<el-input v-model={props.detail.port} type="number" placeholder="请输入服务端口" />
							</el-form-item>
							{(props.detail.type == "MQTT" || props.detail.type == "DB") && (
								<div>
									<el-form-item label="用户名" prop="username">
										<el-input v-model={props.detail.username} placeholder="请输入用户名" />
									</el-form-item>
									<el-form-item label="密码" prop="password">
										<el-input
											v-model={props.detail.password}
											type="password"
											show-password
											autocomplete="new-password"
											placeholder="请输入密码"
										/>
									</el-form-item>
								</div>
							)}
							{props.detail.type == "DB" && (
								<div>
									<el-form-item label="数据库驱动" prop="dbDriver">
										<el-select v-model={props.detail.dbDriver} disabled={props.detail.id} placeholder="请输入数据库驱动">
											<el-option label="mysql" value="mysql" />
											<el-option label="postgres" value="postgres" />
											<el-option label="sqlserver" value="sqlserver" />
										</el-select>
									</el-form-item>
									<el-form-item label="数据库名" prop="dbName">
										<el-input v-model={props.detail.dbName} placeholder="请输入数据库名" />
									</el-form-item>
									<el-form-item label="数据库表名" prop="dbTable">
										<el-input v-model={props.detail.dbTable} placeholder="请输入数据库表名" />
									</el-form-item>
								</div>
							)}
							{props.detail.type == "HTTP" && (
								<el-form-item label="URL" prop="url">
									<el-input v-model={props.detail.url} placeholder="请输入接口地址" />
								</el-form-item>
							)}
						</el-form>
					</div>
				</DialogBox>
			);
		};
	}
});
